<template>
  <div>
    <div class="app">
      <h2>求和为：{{ sum }}</h2>
      <h2>名字为：{{ person.name }}</h2>
      <h2>年龄为：{{ person.age }}</h2>
      <button @click="changeSum">sum+1</button>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changePerson">修改整个人</button>
      <br />
      <h2>汽车信息 {{ car }}</h2>
      <button @click="changeBrand">修改品牌</button>
      <button @click="changeColor">修改颜色</button>
      <button @click="changeEnigine">修改发动机</button>
      <button @click="changeCar">修改整个车</button>
    </div>
  </div>
</template>

<script setup lang="ts" name="App">
import { shallowReactive, shallowRef } from "vue";

// 浅响应式 只有数据的第一层为响应式
let sum = shallowRef(0);
let person = shallowRef({
  name: "张三",
  age: 18,
});
// 浅响应式 只有数据的第一层为响应式
let car = shallowReactive({
  brand: "奔驰",
  options: {
    color: "红色",
    engine: "V8",
  },
});
function changeSum() {
  sum.value += 1;
}
function changeName() {
  person.value.name = "李四";
}
function changeAge() {
  person.value.age = 20;
}
function changePerson() {
  person.value = { name: "王五", age: 30 };
}
function changeBrand() {
  car.brand = "宝马";
}
function changeColor() {
  car.options.color = "白色";
}
function changeEnigine() {
  car.options.engine = "V6";
}
function changeCar() {
  Object.assign(car, {
    brand: "奥迪",
    options: {
      color: "紫色",
      engine: "V10",
    },
  });
}
</script>
<style scoped>
.app {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10;
  padding: 10px;
}
button {
  margin: 5px;
}
</style>
